<template>
  <div>
    <div id="main" style="width: 500px; height: 400px"></div>
    <div id="pie" style="width: 500px;height: 400px;"></div>
  </div>
</template>
<!-- 测试3 -->
<script>
import * as echarts from 'echarts'
export default {
  name: "Home",
  data() {
    return {

    }
  },
  mounted() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title:{
        text:'各季度会员数量统计',
        subtext:'趋势图',
        left:'center'
      },
      xAxis: {
        type: 'category',
        data: ["第一季度","第二季度","第三季度","第四季度"]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'line'
        },
        {
          data:[],
          type:'bar'
        }
      ]
    };
    //饼图

    var pieDom = document.getElementById('pie');
    var pieChart = echarts.init(pieDom);
  var pieOption = {
  title: {
    text: '各季度会员数量统计',
    subtext: '比例',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

   

    this.request.get("/echarts/members").then(res=>{
      option.series[0].data=res.data;
      option.series[1].data=res.data;
      myChart.setOption(option);

      pieOption.series[0].data=[
        {name:"第一季度",value:res.data[0]},
        {name:"第二季度",value:res.data[1]},
        {name:"第三季度",value:res.data[2]},
        {name:"第四季度",value:res.data[3]},
      ]
      pieChart.setOption(pieOption)
    })
  }


}
</script>

<style>
</style>